/*
  1. 使用createContext 创建Context对象
  2. 在顶层组件通过Provider 提供数据
  3. 在底层组件通过useContext函数获取数据
*/
//1. 引入useContext和createContext
import React, { createContext } from "react"
import { useContext, useState } from "react"
//实例化
const Context = createContext()
/*
1.APP->A->B 实现APP和B组件的通信
*/
//A组件
function ComA () {
  const count = useContext(Context)
  console.log(count, 'count')
  return (
    <div>
      ComA
      <ComB></ComB>
      {count}
    </div>
  )
}
//B组件
function ComB () {
  return (
    <div>
      ComB
    </div>
  )
}
//在顶层组件通过Provider 提供数据
function App () {
  const [count, setCount] = useState(0)
  return (
    <Context.Provider value={count}>
      <div className="App">
        <ComA></ComA>
        <button onClick={() => setCount(count + 1)}>加</button>
      </div>
    </Context.Provider>
  )
}
export default App
